<template>
  <view class="box">
    <view class="tou top fixed" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        @click="fanhui"
        class="image1"
        src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
      />
      <!-- #ifndef MP-WEIXIN -->
      招才信息
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <text @click="fanhui" style="position: absolute; left: 50%; transform: translateX(-50%)"
        >招才信息</text
      >
      <!-- #endif -->
      <image
        @click="sousuo"
        class="image2"
        src="https://pic.bangbangtongcheng.com/static/sousuo.png"
        mode="widthFix"
      />
    </view>
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'"></view>
    <view class="bannerBox" :class="scrollTop != 0 ? 'Ptop' : ''">
      <view class="banner">
        <swiper
          style="min-height: 0rpx; height: 345rpx"
          class="screen-swiper square-dot"
          :indicator-dots="true"
          :circular="true"
          :autoplay="true"
          indicator-active-color="#ffffff"
          interval="5000"
          duration="500"
        >
          <swiper-item v-for="(item, index) in bannerList" :key="index" @click="bannerD(item.id)">
            <image :src="imgUrl + item.picturePath" mode="aspectFill" />
            <view class="byTitle"
              ><span>{{ item.title }}</span></view
            >
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view
      class="cu-list grid col-3 no-border"
      style="margin-left: 30rpx; width: 690rpx; margin-top: 20rpx; justify-content: space-around"
    >
      <view class="cu-item" @click="tiaozhuan(1)">
        <view class="img" style="display: flex; align-items: center; justify-content: center">
          <image
            style="width: 100%; height: 100%"
            src="https://pic.bangbangtongcheng.com/static/bbzc/zcxx_fullTime.png"
          />
        </view>
        <text style="font-size: 30rpx; color: #333333">全职招聘</text>
      </view>
      <view class="cu-item" @click="tiaozhuan(2)">
        <view class="img" style="display: flex; align-items: center; justify-content: center">
          <image
            style="width: 100%; height: 100%"
            src="https://pic.bangbangtongcheng.com/static/bbzc/zcxx_concurrently.png"
          />
        </view>
        <text style="font-size: 30rpx; color: #333333">兼职招聘</text>
      </view>
      <view class="cu-item" @click="tiaozhuan(3)">
        <view class="img" style="display: flex; align-items: center; justify-content: center">
          <image
            style="width: 100%; height: 100%"
            src="https://pic.bangbangtongcheng.com/icon/jiguanZP.png"
          />
        </view>
        <text style="font-size: 30rpx; color: #333333">机关招聘</text>
      </view>
    </view>
    <view class="list">
      <view class="tit">推荐职位</view>
      <view class="vacancy" v-for="(item, index) in Recommend" :key="index" @click="details(item)">
        <view class="vehicleRecom">
          <span class="tagLabel">{{ item.recruitmentType == 1 ? '全职' : '兼职' }}</span>
          <span>{{ item.title }}</span>
        </view>
        <view class="vacancy_center">
          <view class="vacancy_status">
            <span>{{ item.region }}</span>
            <span>{{ item.positionCategory }}</span>
          </view>
          <view class="vacancy_price" v-if="item.recruitmentType == 1">{{
            item.salaryRange == '面议' ? '面议' : item.salaryRange + '元'
          }}</view>
          <view class="vacancy_price" v-else
            >{{ item.salaryRange.split(',').join('') }}&emsp;{{ item.settlementMethod }}</view
          >
        </view>
        <view class="vacancy_biaoq" v-if="item.fringeBenefits">
          <view class="vacancy_label">
            <view class="shade"> </view>
            <view class="label" v-for="(i, j) in item.fringeBenefits.split(',')" :key="j">{{
              i
            }}</view>
          </view>
          <view class="gend" v-if="item.fringeBenefits.split(',').length > 4"> 更多> </view>
        </view>
        <view class="personalInformation">
          <view class="personalInformation_left">
            <view class="GR">
              <image
                class="personalInformation_image"
                v-if="item.userInformationDto.image"
                :src="item.userInformationDto.image"
                mode=""
              ></image>
              <image
                class="personalInformation_image"
                v-else
                src="https://pic.bangbangtongcheng.com/static/my/header.png"
                mode=""
              ></image>
              <span class="name">{{
                item.userInformationDto.nikeName ? item.userInformationDto.nikeName : '未命名用户'
              }}</span>
            </view>
            <view class="GS" v-if="item.userInformationDto.enterpriseRecruitmentStatus">
              <view class="personalInformation_image"></view>
              <span class="corporation">{{ item.enterpriseName }}</span>
            </view>
          </view>
          <view class="personalInformation_right">
            <span class="personalInformation_Time">{{ $Time.getDateDiff(item.createDate) }}</span>
            <span class="personalInformation_distance">{{ item.distance }}km</span>
          </view>
        </view>
      </view>
      <view v-if="Recommend.length == 0" class="none">
        <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
        <view>没有更多数据了</view>
      </view>
      <view class="down" v-show="Recommend.length != 0 && !downStatus">没有更多了</view>
    </view>
    <view v-if="scrollTop > 0" class="hui" @click="totop">
      <image src="https://pic.bangbangtongcheng.com/static/top.png" />返回顶部
    </view>
    <view class="zbc" v-if="zbc">
      <view class="tan">
        <view class="text">商家已将您标记为离职，是否同意？</view>
        <view class="xiao">稍后</view>
        <view class="tong">同意</view>
        <view class="guan" @click="guan">×</view>
      </view>
    </view>
    <uniBall></uniBall>
  </view>
</template>

<script>
  import permision from '@/js_sdk/wa-permission/permission.js'
  import { mapGetters } from 'vuex'
  let statusBarHeight
  //#ifdef H5
  import wxshare from '../../utils/index.js'
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44
  //#endif
  // #ifdef APP-PLUS
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44
  //  #endif
  // #ifdef MP-WEIXIN
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5 + 88
  //  #endif
  import Tabbar from '@/components/tabbar.vue'
  export default {
    data() {
      return {
        statusBarHeight,
        zbc: false,
        bannerList: [],
        imgUrl: this.$imgSrc,
        userInfo: uni.getStorageSync('Pduser'),
        scrollTop: '0',
        trigger: false,
        downStatus: true,
        upStatus: true,
        data: {
          recruitmentType: '', //招聘类型（1：全职，2：兼职）
          longitude: '', //经度
          latitude: '', //纬度
          pageNo: 1,
          pageSize: 10,
        },
        Recommend: [],
      }
    },
    components: {
      'view-tabbar': Tabbar,
    },
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    async onLoad(options) {
      if (uni.getStorageSync('locationState') == 1) {
        await this.getLocation()
      }
      this.getBanner()
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    filters: {
      nums(val) {
        return val.toFixed(2)
      },
    },
    onPageScroll: function (Object) {
      this.scrollTop = Object.scrollTop
    },
    async onPullDownRefresh() {
      this.Recommend = []
      this.data.pageNo = 1
      this.downStatus = true
      if (this.upStatus) {
        this.trigger = true
        await this.getRecommend()
      }
    },
    onReachBottom() {
      this.down()
    },
    methods: {
      sousuo() {
        // if (!this.userinfo.phone) {
        // 	uni.showToast({
        // 		title: "请登录",
        // 		icon: "none",
        // 		mask: true
        // 	});
        // 	return;
        // }
        uni.navigateTo({
          url: '/pages_recruitMoney/index/zc_seach?searchType=2',
        })
      },
      // 轮播图跳转
      bannerD(id) {
        uni.navigateTo({
          url: '/pages/index/bannerData?id=' + id,
        })
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      guan() {
        this.zbc = false
      },
      totop() {
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 300,
        })
      },
      down() {
        if (this.downStatus) {
          this.data.pageNo++
          this.getRecommend()
        }
      },
      async up() {},
      getRecommend() {
        this.upStatus = false
        this.data.userId = this.userInfo.id
        this.$myRequest
          .get('/api/mobile/personnelOwner/getRecommendedPosition', this.data)
          .then((res) => {
            uni.hideLoading()
            if (!res.recommendedPosition.pageList.length) {
              this.downStatus = false
            }
            if (res.recommendedPosition.pageCount < this.data.pageNo * this.data.pageSize) {
              this.downStatus = false
            }
            this.upStatus = true
            this.trigger = false
            this.Recommend = this.Recommend.concat(res.recommendedPosition.pageList)
            uni.stopPullDownRefresh()
          })
      },
      getBanner() {
        this.$myRequest
          .get('/api/mobile/vehicleOwner/getCarouselChartsByType', {
            carouselType: '1',
            type: '9',
          })
          .then((res) => {
            this.bannerList = res.carouselChartsList.pageList
          })
      },
      tiaozhuan(num) {
        if (num == 1) {
          uni.navigateTo({
            url: '/pages_recruitMoney/recruitmentInformation/full-timeRecruitment',
          })
        } else if (num == 2) {
          uni.navigateTo({
            url: '/pages_recruitMoney/recruitmentInformation/part-timeRecruitment',
          })
        } else if (num == 3) {
          uni.navigateTo({
            url: '/pages_recruitMoney/organizationRecruit/index',
          })
        }
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      details(item) {
        if (item.recruitmentType == '1') {
          uni.navigateTo({
            url: '/pages_recruitMoney/recruitmentDetails/fullTime?id=' + item.id,
          })
        } else {
          uni.navigateTo({
            url: '/pages_recruitMoney/recruitmentDetails/concurrently?id=' + item.id,
          })
        }
      },
      async getLocation() {
        this.getLocation1()
      },
      getLocation1() {
        uni.showLoading({
          title: '加载中',
          mask: true,
        })
        let _this = this
        uni.getLocation({
          type: 'gcj02',
          highAccuracyExpireTime: '3000',
          success(res) {
            _this.data.latitude = res.latitude
            _this.data.longitude = res.longitude
            _this.getRecommend()
          },
          fail:(res) => {
            console.log(res, '经纬度没有授权');
            this.$SHOWMODAL_TO_SETTINGS();
            uni.setStorageSync('locationState', 0)
            if (uni.getStorageSync('locationState') == 0) {
              // uni.showModal({
              //   title: '提示',
              //   content: '您已关闭位置权限或获取位置信息失败',
              //   success: function (res) {
              //     if (res.confirm) {
              //       // plus.runtime.openURL("app-settings:");
              //       if (plus.os.name === 'iOS') {
              //         plus.runtime.openURL('app-settings://')
              //       } else {
              //         var Intent = plus.android.importClass('android.content.Intent')
              //         var Settings = plus.android.importClass('android.provider.Settings')
              //         var Uri = plus.android.importClass('android.net.Uri')
              //         var mainActivity = plus.android.runtimeMainActivity()
              //         var intent = new Intent()
              //         intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
              //         var uri = Uri.fromParts('package', mainActivity.getPackageName(), null)
              //         intent.setData(uri)
              //         mainActivity.startActivity(intent)
              //       }
              //     } else if (res.cancel) {
              //       console.log('用户点击取消')
              //     }
              //   },
              // })
              return false
            }
          },
        })
      },
    },
  }
</script>

<style lang="less" scoped>
  .zbc {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 99999;

    .tan {
      position: absolute;
      width: 600rpx;
      height: 300rpx;
      background-color: #fff;
      border-radius: 10rpx;
      top: 34%;
      left: 75rpx;

      .text {
        width: 100%;
        text-align: center;
        margin-top: 80rpx;
        font-size: 34rpx;
      }

      .xiao {
        position: absolute;
        width: 160rpx;
        height: 60rpx;
        background: #ffffff;
        border: 2rpx solid #64b6a8;
        border-radius: 37rpx;
        left: 118rpx;
        bottom: 54rpx;
        text-align: center;
        line-height: 60rpx;
        color: #64b6a8;
      }

      .tong {
        position: absolute;
        width: 160rpx;
        height: 60rpx;
        background: #64b6a8;
        border-radius: 37rpx;
        right: 118rpx;
        bottom: 54rpx;
        text-align: center;
        line-height: 60rpx;
        color: #fff;
      }

      .guan {
        position: absolute;
        width: 58rpx;
        height: 58rpx;
        border: 4rpx solid #ffffff;
        border-radius: 50%;
        left: 50%;
        transform: translateX(-50%);
        bottom: -100rpx;
        text-align: center;
        line-height: 48rpx;
        color: #fff;
        font-size: 54rpx;
      }
    }
  }

  .box {
    width: 100%;
    min-height: 100vh;
    padding-bottom: 0rpx;
    background-color: #fff;
  }

  .tou {
    position: relative;
    width: 100%;
    // height: 88rpx;
    text-align: center;
    /* #ifdef MP-WEIXIN */
    text-align: left;
    display: flex;
    align-items: center;
    /* #endif */
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;

    .image1 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }

    .image2 {
      position: absolute;
      width: 56rpx;
      height: 56rpx;
      bottom: 16rpx !important;
      // top: 116rpx;
      right: 30rpx;
      /* #ifdef MP-WEIXIN */
      position: initial;
      margin-left: auto;
      margin-right: 200rpx;
      /* #endif */
    }
  }

  .bannerBox {
    width: 100%;
    height: 400rpx;
    background: #64b6a8;
    padding-top: 28rpx;
    margin-top: -4rpx;

    .banner {
      margin-left: 30rpx;
      width: 690rpx;
      height: 346rpx;
      overflow: hidden;
      border-radius: 24rpx;

      .byTitle {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.1);

        span {
          width: 650rpx;
          padding: 0 20rpx;
          position: absolute;
          bottom: 46rpx;
          font-size: 34rpx;
          font-weight: 500;
          color: #ffffff;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
  }
  .cu-item {
    width: 30% !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  .cu-item .img {
    width: 80rpx;
    height: 80rpx;
  }

  .cu-item text {
    font-size: 28rpx;
    color: #333333;
  }

  .Ptop {
    /* #ifdef H5 || APP-PULS */
    // padding-top: 104rpx;
    margin-top: 98rpx;
    /* #endif */

    /* #ifdef MP  */
    // margin-top: 188rpx;
    /* #endif */
  }

  .fixed {
    // display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 40;
  }

  .list {
    margin-top: 20rpx;
    margin-left: 30rpx;
    margin-right: 30rpx;
    width: 690rpx;

    .tit {
      font-size: 36rpx;
      font-weight: 550;
      color: #18a291;
      margin-bottom: 24rpx;
      display: inline-block;
      position: relative;
    }
    .tit::after {
      content: '';
      display: inline-block;
      width: 44rpx;
      height: 4rpx;
      background-color: #64b6a8;
      border-radius: 4rpx;
      position: absolute;
      bottom: -10rpx;
      left: 50%;
      transform: translateX(-50%);
    }
    .vacancy {
      width: 100%;
      padding-bottom: 30rpx;
      margin-bottom: 30rpx;
      border-bottom: 1px solid #e0e0e0;
      .vehicleRecom {
        font-size: 36rpx;
        font-weight: 600;
        color: #333333;
        line-height: 44rpx;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; //想要的行数
        -webkit-box-orient: vertical;
        .tagLabel {
          vertical-align: top;
          background: #64b6a8;
          color: #fff;
          font-size: 24rpx;
          text-align: center;
          width: 106rpx;
          margin-right: 10rpx;
          padding: 2rpx 6rpx;
          border-radius: 4rpx;
        }
      }
      .vacancy_center {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 16rpx;
        .vacancy_status {
          span {
            font-size: 28rpx;
            font-weight: 400;
            color: #333333;
          }
          span:nth-child(1) {
            margin-right: 16rpx;
          }
        }
        .vacancy_price {
          font-size: 30rpx;
          font-weight: 550;
          color: #e00000;
        }
      }
      .vacancy_biaoq {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 16rpx;
        .vacancy_label {
          flex: 1;
          height: 48rpx;
          position: relative;
          overflow: hidden;
          white-space: nowrap;
          .shade {
            position: absolute;
            right: 0;
            top: 0;
            width: 100rpx;
            height: 48rpx;
            background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
          }
          .label {
            display: inline-block;
            padding: 10rpx;
            background-color: #f0f0f0;
            margin-right: 10rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #333333;
            border-radius: 4rpx;
          }
          .label:nth-last-child(1) {
            margin-right: 0rpx;
          }
        }
        .gend {
          text-align: right;
          width: 80rpx;
          height: 100%;
          font-size: 24rpx;
          color: #888888;
        }
      }
      .personalInformation {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 28rpx;
        .personalInformation_left {
          display: flex;
          flex-direction: column;
          .personalInformation_image {
            width: 42rpx;
            height: 42rpx;
            border-radius: 42rpx;
            margin-right: 12rpx;
          }
          .GR {
            display: flex;
            align-items: center;
            .name {
              font-size: 24rpx;
              font-weight: 400;
              color: #333333;
            }
          }
          .GS {
            display: flex;
            align-items: center;
            .corporation {
              font-size: 24rpx;
              font-weight: 400;
              color: #333333;
            }
          }
        }
        .personalInformation_right {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          .personalInformation_Time {
            font-size: 24rpx;
            font-weight: 400;
            color: #888888;
            margin-bottom: 6rpx;
            text-align: right;
          }
          .personalInformation_distance {
            font-size: 24rpx;
            font-weight: 400;
            color: #888888;
            text-align: right;
          }
        }
      }
    }
  }

  .hui {
    position: fixed;
    right: 30rpx;
    bottom: 154rpx;
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx;
    background-color: #fff;
    border-radius: 34rpx;
    font-size: 26rpx;
    box-shadow: 0px 0px 36rpx rgba(0, 0, 0, 0.16);

    image {
      width: 46rpx;
      height: 46rpx;
      margin-right: 18rpx;
    }
  }

  .down {
    height: 60rpx;
    line-height: 60rpx;
    // border-top: 2rpx solid #d0d0d0;
    text-align: center;
  }
  .none {
    text-align: center;

    image {
      width: 430rpx;
      margin-bottom: 16rpx;
    }

    view {
      height: 40rpx;
      line-height: 40rpx;
      color: #666;
    }
  }
</style>
